<template>
    <div class="solid">
        <div class="header">
            <div class="title">土壤墒情监测平台</div>
            <div class="tip">SOIL MOISTURE MONITORING PLATFORM</div>
        </div>
        <div class="tabs">
            <div class="left">
                <div class="item" style="margin-right:50px;">实时监控</div>
                <div class="item">数据分析</div>
            </div>
            <div class="right">
                <div class="item" @click="toCencus">统计分析</div>
                <div class="item" style="margin-left:50px;">遥感反演</div>
            </div>
        </div>
        <div class="contents">
            <div class="left">
                <div class="module qxModule">
                    <div class="title">
                        <div class="text">气象基本信息</div>
                    </div>
                    <div class="content">
                        <div class="item" v-for="(v, k) in state.leftTopData" :key="k">
                            <div class="icon"><img :src="v.icon" alt=""></div>
                            <div class="name">{{ v.name }}</div>
                            <div class="num">{{ v.num }}</div>
                        </div>
                    </div>
                </div>
                <div class="module">
                    <div class="title">
                        <div class="text">农田面积</div>
                    </div>
                    <div class="content">
                        <echarts-box :option="state.leftCenter"></echarts-box>
                    </div>
                </div>
                <div class="module">
                    <div class="title">
                        <div class="text">人员结构</div>
                    </div>
                    <div class="content">
                        <tableList style="height:90%" :rows="state.leftBottomData.tableRows"
                            :columns="state.leftBottomData.tableColumns" :headerStyle="{ background: '#173c61' }">
                        </tableList>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="module module1">
                    <div class="title">
                        <div class="text">土壤墒情分布</div>
                    </div>
                </div>
                <div class="module module2">
                    <div class="title">
                        <div class="text">土壤监测</div>
                    </div>
                    <div class="content">
                        <div class="left">
                            <echarts-box :option="state.centerLeft"></echarts-box>
                        </div>
                        <div class="right">
                            <echarts-box :option="state.centerRight"></echarts-box>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="module right1">
                    <div class="title">
                        <div class="text">实时环境监控</div>
                    </div>
                    <div class="content">
                        <div class="right-item" v-for="(v, k) in state.rightTopData" :key="k">
                            <div class="icon"><img :src="v.icon" alt=""></div>
                            <div class="right-text">
                                <div class="num">
                                    {{ v.num }} <span class="unit">个</span>
                                </div>
                                <div class="name">{{ v.name }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="module">
                    <div class="title">
                        <div class="text">生长周期</div>
                    </div>
                    <div class="content">
                        <echarts-box style="height:80%" :option="state.rightCenterData"></echarts-box>
                    </div>
                </div>
                <div class="module">
                    <div class="title">
                        <div class="text">报警信息</div>
                    </div>
                    <div class="content">
                        <List :data="state.rightBottomData" :height="'260px'" :showNumber="4" :speed="2000" width="100%"
                            class="renderBox">
                            <template v-slot:itemCon="{ item }" style="width:100%">
                                <div class="list-box">
                                    <div class="list-title">{{ item.name }}</div>
                                    <div class="list-infos">
                                        {{ item.info }}
                                    </div>
                                </div>
                            </template>
                        </List>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup>
import tableList from '@/components/table.vue'
import echartsBox from "@/components/echarts-box.vue";
import List from '@/components/list.vue'
import { leftTopData, leftCenter, leftBottomData, rightTopData, rightCenterData, rightBottomData, centerLeft, centerRight } from './data.ts'
import { reactive } from "vue-demi";
import { useRouter } from 'vue-router';

const state = reactive({
    leftTopData,
    leftCenter,
    leftBottomData,
    rightTopData,
    rightCenterData,
    rightBottomData,
    centerLeft,
    centerRight
})
const router = useRouter()
const toCencus = () => {
    router.push('/soil-plane')
}
</script>
<style scoped lang="scss">
.solid {
    width: 100vw;
    height: 100vh;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    background: url('@/images/soil/soilBg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    .header {
        text-align: center;
        margin-top: 10px;

        .title {
            font-weight: bolder;
            background-image: linear-gradient(#e2f0fe, #2b92b8);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 35px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tip {
            font-size: 12px;
            color: #fff;
            margin-top: -5px;

            word-spacing: 1em;
        }
    }

    .tabs {
        display: flex;
        width: 70%;
        margin: 10px auto 0;
        justify-content: space-between;

        .left,
        .right {
            display: flex;

            .item {
                font-size: 18px;
                cursor: pointer;
                width: 182px;
                line-height: 57px;
                text-align: center;
                background: url("@/images/soil/btn1.png") no-repeat;
                background-size: 100% 100%;

                &:hover {
                    background: url("@/images/soil/btnBg.png") no-repeat;
                    background-size: 100% 100%;
                }
            }

        }
    }

    .contents {
        flex: 1;
        display: flex;
        padding: 00px 40px;

        .right,
        .center,
        .left {
            width: 360px;
            display: flex;
            flex-direction: column;

            .module {
                flex: 1;
                background: url(@/images/soil/box.png) no-repeat;
                background-size: 100% 100%;
                margin-top: 20px;
                display: flex;
                flex-direction: column;

                .title {
                    background: url(@/images/soil/title.png) no-repeat;
                    background-size: 100% 100%;
                    width: 220px;
                    font-size: 30px;
                    height: 70px;
                    position: relative;
                    left: -20px;
                    top: -20px;

                    .text {
                        position: absolute;
                        top: 23px;
                        left: 60px;
                        width: 100%;
                        z-index: 9;
                        font-size: 20px;
                        font-weight: bold;
                        color: #FFFFFF;
                        background-image: linear-gradient(#e2f0fe, #2b92b8);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }

                .content {
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 0 20px;
                    margin-top: -20px;
                    ;
                    align-content: flex-start;
                    .item {
                        margin-bottom: 10px;
                        border: 1px solid #0b224a;
                        padding: 0px 8px;
                        height: 40px;
                        width: 45%;
                        box-shadow: inset 2px 4px 8px #074761, inset -2px -4px 8px #074761;
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        // align-self: flex-start;
                        // align-content: flex-start;
                        .icon {
                            width: 16px;
                            margin-right: 10px;

                            img {
                                width: 16px;
                                height: 16px;
                                ;
                                vertical-align: middle;
                            }
                        }

                        .name {

                            flex: 2;
                        }

                        .num {
                            margin-left: 10px;
                            ;
                            flex: 1
                        }

                        &:nth-child(2n-1) {
                            margin-right: 20px;
                            ;
                        }
                    }

                    .renderBox {

                        .list-box {
                            display: flex;
                            font-size: 12px;
                            justify-content: space-between;
                            width: 100%;
                            border: 1px solid #074761;
                            // border-radius: 4px;
                            padding: 4px 16px;
                            border-left: 4px solid #2FC6DC;

                            .list-title {
                                font-size: 14px;
                            }

                            .list-infos {
                                border: 1px solid #d7b322;
                                padding: 0px 4px;
                                border-radius: 4px;
                            }

                        }
                    }
                }
            }
            .qxModule{
                flex:0;
                padding-bottom: 20px;;
            }
            .right1 {
                flex:0;
                padding-bottom: 40px;;
                .content {
                    align-content: flex-start;
                    align-items: center;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);

                    .right-item {
                        width: 45%;
                        margin-bottom: 20px;
                        ;

                        &:nth-child(2n-1) {
                            margin-right: 20px;
                            ;
                        }

                        align-content: flex-start;
                        display: flex;
                        align-items: center;

                        .icon {
                            margin-right: 20px;

                            img {
                                width: 40px;
                                object-fit: contain;
                            }
                        }

                        .right-text {
                            .num {
                                font-size: 24px;
                                font-weight: 600;

                                .unit {
                                    font-size: 12px;
                                }
                            }

                            .name {
                                font-size: 14px;
                                ;
                                color: #2FC6DC;
                            }
                        }
                    }
                }
            }
        }

        .center {
            margin: 0 20px;
            flex: 1;

            .module1 {
                flex: 2;
                background: url(@/images/soil/bg.png) no-repeat;
                background-size: 100% 100%;
                box-shadow: inset 8px 8px 16px #45acbf, inset -8px -8px 16px #45acbf;
            }

            .module2 {
                flex: 1;

                .content {

                    display: flex;
                    width: 95%;
                    margin: -20px auto 0;

                    .right,
                    .left {
                        height: 88%;
                        background: #032647;
                        border: 1px solid #00B0D8;
                        flex: 1;
                    }

                    .left {
                        margin-right: 20px;
                        ;
                    }
                }
            }
        }
    }
}
</style>